<template>
	<view class="popup-bg" @touchmove.native.stop.prevent v-show="show" @tap.stop="$emit('close')">
		<view class="popup-box" @tap.stop :class="[show ? 'gdIn' : 'gdOut']">
			<image class="close-btn img-40" src="@/static/img/index/close.png" @tap.stop="$emit('close')"></image>
			<view class="sku-goods u-flex">
				<u-image  mode="aspectFill" class="image u-m-r-30" width="176rpx" height="176rpx" :src="checkInfo.skuCoverImg || goodsImg">
					<u-loading-icon slot="loading"></u-loading-icon>
				</u-image>
				<view>
					<view class="price c-red w-600">¥{{ checkInfo.price || info.price }}</view>
					<view class="stock" v-show="`${checkInfo.stock}`">剩余{{ checkInfo.stock }}件</view>
				</view>
			</view>
			<scroll-view scroll-y>
				<view class="sku-big-box" :style="{ '--backgroundColor': activeBackgroundColor }">
					<view class="sku-item-box" v-for="(item, index) in info.productSkus" :key="item.id">
						<view class="tlt">{{ item.name }}</view>

						<view class="item-box u-flex">
							<view
								class="item"
								:class="{ 'item-act': sitem.isCheck }"
								v-for="(sitem, sindex) in item.productSkuValues"
								:key="sitem.id"
								@tap="checkSku(index, sindex)"
							>
								{{ sitem.name }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="sum-box u-flex u-flex-between">
				<view class="tlt">请选择数量</view>
				<view class="sum-item u-flex">
					<image class="img-32 u-m-r-12" src="@/static/img/index/sub.png" @tap="sub"></image>
					<view class="number text-center">{{ goodsNum }}</view>
					<image class="img-32 u-m-l-12" src="@/static/img/index/add.png" @tap="add"></image>
				</view>
			</view>
			<u-button size="large" class="m-t-114" :color="primary" shape="circle" text="确定" @click="confirm" :throttleTime="1000" />
			<view style="height: 20rpx;"></view>
			<view class="ios-btm"></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checkList: [],
			goodsNum:1
		}
	},
	props: {
		checkInfo: Object,
		info: Object,
		show: Boolean,
		primary: String,
	},
	computed: {
		goodsImg() {
			return this.info.imageUrls ? this.info?.imageUrls?.split(',')[0] :''
		},
		activeBackgroundColor() {
			return this.primary?.replace('1)', '0.05)')
		}
	},
	watch:{
		info (newValue) {
			if(newValue.productSkus.length){
				newValue.productSkus.forEach((item,index) => {
					this.checkSku(index,0)
				})
				
			}
			
		}
	},
	methods: {
		sub() {
			if (this.goodsNum <= 1) return
			this.goodsNum--
		},
		add() {
			if (this.goodsNum < this.checkInfo.stock) {
				this.goodsNum++
			} else {
				uni.showToast({
					icon: 'none',
					title: '库存不足!'
				})
			}
		},
		confirm() {
			if (this.$root.reselectionCheckInfo.stock == 0) {
				uni.showToast({
					icon: 'none',
					title: '库存不足!'
				})
				return
			}
			this.$emit('confirm',this.goodsNum)
		},
		checkSku(index, sindex) {
			this.info.productSkus[index].productSkuValues.map(item => {
				item.isCheck = false
			})
			this.info.productSkus[index].productSkuValues[sindex].isCheck = true
			this.info.productSkus.map((item, i) => {
				item.productSkuValues.map(sitem => {
					if (sitem.isCheck) {
						this.checkList[i] = sitem.id
					}
				})
			})
			// 选择的sku与商品的productSkus长度相同，则代表商品的每个规格都有选中
			if (this.checkList.length == this.info.productSkus.length && !this.checkList.includes(undefined)) {
				this.$root.reselectionCheckInfo = this.info.productSkuSpecifications.find(item => item.skuKey == this.checkList.join('/'))
			}
			this.goodsNum = 1
			this.$forceUpdate()
		}
	}
}
</script>

<style lang="scss" scoped>
.m-t-114 {
	margin-top: 114rpx;
}
.popup-box {
	padding: 52rpx 32rpx 0 32rpx;
	border-radius: 32rpx 32rpx 0 0;
	.sku-goods {
		padding-bottom: 20rpx;
		.price {
				font-size:48rpx;
				line-height:58rpx;
		}
		.stock {
			color: #808080;
			font-size:28rpx;
			line-height:40rpx;
		}
	}

	scroll-view {
		max-height: 570rpx;
	}

	.sku-big-box {
		.sku-item-box {
			margin-top: 64rpx;
			.tlt {
				color: #424242;
				font-size:30rpx;
				line-height:42rpx;
			}

			.item-box {
				.item {
					height: 56rpx;
					min-width: 120rpx;
					padding: 0 30rpx;
					// color: $color;
					font-size: 28rpx;
					line-height: 52rpx;
					margin-top: 20rpx;
					margin-right: 20rpx;
					text-align: center;
					background: #ededed;
					border-radius: 10rpx;
					border: 2rpx solid #ededed;

					input {
						height: 56rpx;
						width: 120rpx;
						border-radius: 8rpx;
						// color: $color;
						font-size: 28rpx;
						line-height: 56rpx;
					}
				}

				.item-act {
					color: var(--color-primary);
					background: var(--backgroundColor);
					border-color: var(--color-primary);
				}
			}
		}
	}

	.sum-box {
		margin-top: 50rpx;

		.tlt {
			color: #424242;
			font-size:30rpx;
			line-height:42rpx;
		}

		.sum-item {
			font-size: 30rpx;
			margin-top: 20rpx;
			.number {
				width: 84rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: #f2f2f2;
				border-radius: 4px;
			}
		}
	}

	.close-btn {
		position: absolute;
		top: 40rpx;
		right: 32rpx;
	}

	button {
		width: 686rpx;
		height: 88rpx;
		color: #ffffff;
		font-weight: 600;
		margin-top: 30rpx;
		border-radius: 50rpx;
			font-size:32rpx;
			line-height:44rpx;
	}
}
</style>
